<template>
	<view class="container">
		<!-- 文章标题 -->
		<view class="article-title">{{ article.title }}</view>

		<!-- 文章内容 -->
		<view class="article-content" v-html="article.txt"></view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				id: 0,
				article: {
					title: "示例文章标题",
					txt: `<p>这是文章的内容。你可以在这里插入 HTML 内容。</p>`
				}
			};
		},
		// created() {
		// 	this.word = this.word.replace(/(\s{2,})(?![^<>]*>)/g, function(match) {
		// 		return match.replace(/ /g, "\xa0");
		// 	});
		// 	// console.log(this.word)
		// },
		methods: {
			// 格式化日期
			formatDate(dateString) {
				const date = new Date(dateString);
				return date.toLocaleDateString();
			},
			onLoad: function(option) {
				// console.log("参数：" + option.id); //打印出上个页面传递的参数。
				this.article = this.getTutorialsId(option.id);
			},
		},
		computed: {
			...mapGetters('course', ['getTutorialsId']),
		},

	};
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.article-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.article-meta {
		font-size: 14px;
		color: #666;
		margin-bottom: 20px;
	}

	.author {
		margin-right: 10px;
	}

	.publish-date {
		color: #999;
	}

	.article-content {
		font-size: 16px;
		line-height: 1.5;
	}
</style>